<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="box">
        <p>我是一个段落</p>
        <div>我是一个div</div>
        <p>
            <a data-categoryName="sj" data-category1Id='1'>我是一级分类的a标签:手机 id=1</a>
        </p>
        <ul>
            <li>
                <a data-categoryName="dzs" data-category2Id='99'>我是二级分类a:电子书 id=99</a>
            </li>
        </ul>
    </div>
</body>

</html>
<script>
    //标签的自定义属性
    let box = document.querySelector('.box');
    box.onclick = function (event) {
        //event.target:是触发事件元素  p div a 
        //dataset是DOM节点的一个属性，可以获取元素的自定义属性与属性
        const { categoryname, category1id, category2id } = event.target.dataset;
        //执行IF条件语句:一定是a标签,因为只有a标签才有这个自定义属性！！！！
        if (categoryname) {
            //区分是一级分类a、还是二级分类a
            if (category1id) {
                alert('一级分类a');
            } else {
                alert('二级分类a');
            }
        }
    }
</script>


<script>
    //任何的语句都阻挡不了变量声明部分提升！！！！
    //V8JS引擎，在解析代码的时候,先看变量，如果有变量先把变量声明部分进行提升！！！


    //阿里实习面试
    if(false){
        var a = 100;
    }
    console.log(a);
    
    //变量声明提升
    function fun (){
       console.log(a);
       return;
       var a = 100;
    }
    fun();
</script>


<script>
  function Vue(a){
    console.log(a);
  }

  new Vue()

</script>